<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	
	<style type="text/css">
	body{margin:0;padding:0;background:#FFF;color:#000;}
	a{outline:none;color:#000;font-size:84px}
	.panel{border:5px solid #FFF;background:#CCC;padding:10px}
	.content {background:#777;width:100%;height:100%;margin:0 auto 0 auto}	
	
	#overview{cursor:pointer;font:bold 1.2em/3em Arial,sans-serif;text-transform:uppercase;color:#FFF;-webkit-border-radius:5px;-moz-border-radius:5px;top:0;right:0;width:20em;height:3em;background:black;text-align:center}
	
	h1{color:#000;font:bold 64px/64px Arial,sans-serif;margin:8px 0;padding:0}
	h1 a{color:#000}
	</style>
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
	<!-- Easing not required -->
	<script type="text/javascript" src="jquery.easing.js"></script>
	<script type="text/javascript" src="jquery.panelmagic.js"></script>
	
</head>

<body>
	<div id="home" class="panel">
		<div class="content">
			<a href="" onclick="$pm.loadPanel('#orange');return false">orange</a>			
		</div>
	</div>
	<div id="about" class="panel">
		<div class="content">
			<a href="" onclick="$pm.loadPanel('#purple');return false">purple</a>
		</div>
	</div>
	<div id="contact" class="panel">
		<div class="content">
			<a href="" onclick="$pm.loadPanel('#teal');return false">teal</a>
		</div>
	</div>
	<div id="company" class="panel">	
		<div class="content">
			<a href="" onclick="$pm.loadPanel('#home');return false">home</a>			
		</div>
	</div>
	<div id="purple" class="panel">	
		<div class="content">
			<a href="" onclick="$pm.loadPanel('#about');return false">about</a>		
		</div>
	</div>
	<div id="orange" class="panel">			
		<div class="content">
			<a href="" onclick="$pm.loadPanel('#contact');return false">contact</a>			
		</div>
	</div>
	<div id="teal" class="panel">
		<div class="content">
			<a href="" onclick="$pm.loadPanel('#home');return false">home</a>		
		</div>
	</div>	
	<div id="extra1" class="panel">
		<div class="content">
			<a href="" onclick="$pm.loadPanel('#home');return false">home</a>		
		</div>
	</div>
	<div id="extra2" class="panel">
		<div class="content">
			<a href="" onclick="$pm.loadPanel('#home');return false">home</a>		
		</div>
	</div>
	<div id="extra3" class="panel">
		<div class="content">
			<a href="" onclick="$pm.loadPanel('#home');return false">home</a>		
		</div>
	</div>
	<div id="extra4" class="panel">
		<div class="content">
			<a href="" onclick="$pm.loadPanel('#home');return false">home</a>		
		</div>
	</div>
	<div id="extra5" class="panel">
		<div class="content">
			<a href="" onclick="$pm.loadPanel('#home');return false">home</a>		
		</div>
	</div>
	<div id="extra6" class="panel">
		<div class="content">
			<a href="" onclick="$pm.loadPanel('#home');return false">home</a>		
		</div>
	</div>
	<div id="extra7" class="panel">
		<div class="content">
			<a href="" onclick="$pm.loadPanel('#home');return false">home</a>		
		</div>
	</div>
	<div id="extra8" class="panel">
		<div class="content">
			<a href="" onclick="$pm.loadPanel('#home');return false">home</a>		
		</div>
	</div>
	<div id="extra9" class="panel">
		<div class="content">
			<a href="" onclick="$pm.loadPanel('#home');return false">home</a>		
		</div>
	</div>
	<div id="overview">
		sitemap
	</div>
	<script type="text/javascript">
	/*<![CDATA[*/		
		var $pm = $jq.panelMagic({
			resizeTimer:1000,
			openingPanel:'#purple',
			panelPreviews: true,
			panelURLParam:'page',
			gridURLParam:'sitemap',
			panelPreviewScale: 1.75,
			previewPause: 150,
			scrollTimer:1500,
			scrollEasing:'bounceout',
			gridLoader:'#overview',
			gridLoaderOpacity:.5,
			gridLoaderOffset:{bottom:20,right:20}
		});
	/*]]>*/	
	</script>
</body>
</html>
